<template>
  <div>
    <div class="add-test-btn">
      <el-button type="primary" size="medium" @click="entryTest">新增试题</el-button>
    </div>
    <!-- 表单域 -->
    <div class="selete-area">
      <el-form label-position="right" label-width="auto" :model="formObj" ref="formRef">
        <el-row :gutter="20">
          <sub-select :list="subList" selectName="学科" :prop="formObj.subjectID" @onSelectChange="getSubInfo"></sub-select>
          <sub-select :list="twoLevelDirectory" :prop="formObj.twoLevelDirectory" selectName="二级目录"></sub-select>
          <sub-select :list="tags" :prop="formObj.tagName" @onSelectChange="formObj.tags=$event" selectName="标签"></sub-select>
          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword">
              <el-input v-model="formObj.keyword" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <sub-select :list="testTypes" :prop="formObj.questionType" @onSelectChange="formObj.questionType=$event" selectName="试题类型"></sub-select>
          <sub-select :list="difficulties" :prop="formObj.difficulty" @onSelectChange="formObj.difficulty=$event" selectName="难度"></sub-select>
          <sub-select :list="directions" :prop="formObj.direction" @onSelectChange="formObj.direction=$event" selectName="方向"></sub-select>
          <sub-select :list="creators" :prop="formObj.creatorID" @onSelectChange="formObj.creatorID=$event" selectName="录入人"></sub-select>
        </el-row>
        <el-row class="" :gutter="20">
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input v-model="formObj.remarks" clearable>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input v-model="formObj.shortName" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" prop="province">
              <el-form-item prop="city">
                <city-select :province="formObj.province" :city="formObj.city" @selected="onCityChanged"></city-select>
              </el-form-item>
            </el-form-item>
          </el-col>
          <el-col class="select-area-btn" :span="6">
            <el-form-item>
              <el-button size="small" @click="resetForm">清除</el-button>
              <el-button type="primary" size="small" @click="searchQuestionList">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 表单域   END -->
  </div>
</template>

<script>
import SubSelect from '@/components/basemanagement/sub-select'
import CitySelect from '@/components/basemanagement/city-select'
import { getSubjectList, getSubjectInfo } from '@/assets/api/subject/subject'

export default {
  name: 'SelectArea',
  props: {
    formObj: {
      required: true,
      type: Object,
    },
  },
  components: {
    SubSelect,
    CitySelect
  },
  data () {
    return {
      // 学科列表
      subList: [],
      twoLevelDirectory: [],
      creators: [],
      tags: [],
      testTypes: [
        {
          value: 1,
          label: '单选'
        },
        {
          value: 2,
          label: '多选'
        },
        {
          value: 3,
          label: '简答'
        }
      ],
      difficulties: [
        {
          value: 1,
          label: '简单'
        },
        {
          value: 2,
          label: '一般'
        },
        {
          value: 3,
          label: '困难'
        }
      ],
      directions: [
        {
          value: 'o2o',
          label: 'o2o'
        },
        {
          value: '外包服务',
          label: '外包服务'
        },
        {
          value: '企业服务',
          label: '企业服务'
        },
        {
          value: '互联网金融',
          label: '互联网金融'
        },
        {
          value: '企业咨询',
          label: '企业咨询'
        },
        {
          value: '互联网',
          label: '互联网'
        },
        {
          value: '电子商务',
          label: '电子商务'
        },
        {
          value: '其他',
          label: '其他'
        }
      ],
    };
  },
  created: function () {
    // 获取学科列表
    this.getSubjectList();
  },
  methods: {
    // 新增试题
    entryTest () {
      this.$router.push({
        path: '/entry',
      });
    },
    // init 下拉框内容
    async getSubjectList () {
      try {
        const { data } = await getSubjectList();
        this.subList = data;
      } catch (err) {
        this.$message({
          message: '获取列表失败',
          type: 'warning',
        });
      }
    },
    // 获取学科详情
    async getSubInfo (id) {
      this.formObj.subjectID = id;
      try {
        const { data } = await getSubjectInfo(id);
        this.twoLevelDirectory = data.twoLevelDirectory;
        this.creators = data.creatorID;
        this.tags = data.tags;
      } catch (error) {
        this.$message({
          message: '获取学科详情失败',
          type: 'warning',
        });
      }
    },
    onCityChanged (arr) {
      this.formObj.province = arr[0]
      this.formObj.city = arr[1]
    },
    resetForm () {
      this.$refs.formRef.resetFields()
      this.$emit('resetForm')
    },
    searchQuestionList () {
      this.formObj.page = 1;
      this.formObj.pagesize = 10;
      this.$emit('searchQuestList');
    }
  },
};
</script>

<style scoped>
.add-test-btn {
  display: flex;
  justify-content: flex-start;
}
.selete-area {
  margin-top: 10px;
}
.select-area-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
}
</style>
